<template>
  <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
    <div slot="header">
      <div style="margin-bottom: 16px" v-show="viewconfig.searchable">
        <a-input-search placeholder="input search text" size="large" @search="onSearch" enter-button="搜索">
          <a-select slot="addonBefore" default-value=".com" style="width: 120px">
            <a-select-option value=".com">
              基本信息搜索
            </a-select-option>
            <a-select-option value=".jp">
              全文检索
            </a-select-option>
          </a-select>
        </a-input-search>
      </div>
      <a-space size="middle" >
        <a-button type="primary" v-for="tag in tags" :key="tag" size="small" @click="getBooksByTag(tag)">{{ tag }}</a-button>
      </a-space>
    </div>
    <div slot="footer"><b>ant design vue</b> footer part</div>
    <a-list-item slot="renderItem" key="item.name" slot-scope="item">
      <div>
        <a-row>
          <a-col :span="3" >
            <img :src="item.img ? item.img:''" :onerror="defaultImg" style="width: 200px;height: 150px">
          </a-col>
          <a-col :span="21">
            <a-descriptions :title="item.name" bordered size="middle" >
              <a-descriptions-item label="价格" :span="2" v-model="item.price">
                <span style="color: red">{{ item.price }}</span>
                <!--                <a-space size='middle' :span="8">-->
                <!--                  <a-button>收藏</a-button>-->
                <!--                  <a-button>加入购物车</a-button>-->
                <!--                </a-space>-->
              </a-descriptions-item>
              <a-descriptions-item label="操作" v-model="item.price">
                <a-space size="middle">
                  <a-button icon="star" @click="addBookCol(item.id)">收藏</a-button>
                  <a-button icon="shopping-cart" @click="addShoppingCart(item.id)">加入购物车</a-button>
                </a-space>
              </a-descriptions-item>
              <a-descriptions-item label="作者" v-model="item.authors" >
                {{ item.authors }}
              </a-descriptions-item>
              <a-descriptions-item label="出版社" v-model="item.publisher">
                {{ item.publisher }}
              </a-descriptions-item>
              <a-descriptions-item label="ISBN" v-model="item.isbn">
                {{ item.isbn }}
              </a-descriptions-item>
              <!--                  <a-descriptions-item label="版次" v-model="edition">-->
              <!--                    {{ item.edition }}-->
              <!--                  </a-descriptions-item>-->
              <a-descriptions-item label="包装" v-model="item.binding">
                {{ item.binding }}
              </a-descriptions-item>
              <a-descriptions-item label="出版时间" v-model="item.publish_date">
                {{ item.publish_date }}
              </a-descriptions-item>
              <a-descriptions-item label="豆瓣评分">
                <template>
                  <a-rate :value="getRateStarVal(item.douban_score)" disabled allow-half/>
                </template>
              </a-descriptions-item>
              <a-descriptions-item label="简介" v-model="item.summary" :span="2">
                <!--                <div v-bind:class="{ expansion : active }" class="card-mid" >{{ item.summary }}</div>-->
                <!--                <div v-html="item.summary"></div>-->
                <LongText :content="item.summary"></LongText>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </div>
    </a-list-item>
  </a-list>
</template>
<script>
  import { findAllBooks, findAllBooksByTag, addBookCol, addShoppingCart } from '@/api/book'

  import longtext from '@/components/mycomponents/LongText'

  const listData = []
  listData.push({
    img: '/static/imges/book_img/default.jpg',
    name: '书名',
    authors: '作者',
    publisher: '出版社',
    sub_name: '副标题',
    translators: '翻译者',
    publish_date: '出版年',
    pages: '页数',
    binding: '封装',
    series: '丛书',
    isbn: 'ISBN',
    douban_score: '5',
    summary: ''
  })
  export default {
    data () {
      return {
        listData,
        tags: ['全部', '小说', '外国文学', '中国文学', '散文', '鲁迅', '经典', '流行', '文化', '生活', '经管', '科技'],
        viewconfig: {
          searchable: false
        },
        pagination: {
          onChange: page => {
            // console.log(page)
          },
          pageSize: 3
        },
        user: {}
      }
    },
    components: {
      'LongText': longtext
    },
    mounted () {
      this.getAllBooks()
    },
    computed: {
      defaultImg () {
        return 'this.src="' + '/imges/book_img/default.jpg' + '"'
      },
      getRateStarVal () {
        return (score) => {
          return parseFloat(score) / 2.0
        }
      }
    },
    methods: {
      getBooksByTag (tag) {
        // console.log(tag)
        findAllBooksByTag(tag).then(res => {
          // console.log('**************收到返回值***************')
          // console.log(res)
          // console.log('**************收到返回值***************')
          // console.log(res.result)
          this.listData = res.result
        }).catch(error => {
          if (error.response && error.response.status === 403) {
            this.$message.error('api请求方式错误')
          }
          if (error.response && error.response.status === 404) {
            this.$message.error('api未找到')
          }
          if (error.response && error.response.status === 500) {
            this.$message.error('服务器内部错误')
          }
        })
      },
      getAllBooks () {
        findAllBooks().then(res => {
          // console.log('**************收到返回值***************')
          // console.log(res)
          // console.log('**************收到返回值***************')
          // console.log(res.result)
          this.listData = res.result
        }).catch(error => {
          if (error.response && error.response.status === 403) {
            this.$message.error('api请求方式错误')
          }
          if (error.response && error.response.status === 404) {
            this.$message.error('api未找到')
          }
          if (error.response && error.response.status === 500) {
            this.$message.error('服务器内部错误')
          }
        })
      },
      addBookCol (bookid) {
        // console.log('**************addBookCol***************')
        var params = { 'userid': this.user.id, 'bookid': bookid }
        addBookCol(params).then(res => {
          this.$message.success(res.result)
        }).catch(error => {
          if (error.response && error.response.status === 403) {
            this.$message.error('api请求方式错误')
          }
          if (error.response && error.response.status === 404) {
            this.$message.error('api未找到')
          }
          if (error.response && error.response.status === 500) {
            this.$message.error('服务器内部错误')
          }
        })
      },
      addShoppingCart (bookid) {
        // console.log('**************addBookCol***************')
        var params = { 'userid': this.user.id, 'bookid': bookid }
        addShoppingCart(params).then(res => {
          this.$message.success(res.result)
          // console.log('**************SET_COUNT***************')
          this.$store.commit('SET_COUNT', res.count)
        }).catch(error => {
          if (error.response && error.response.status === 403) {
            this.$message.error('api请求方式错误')
          }
          if (error.response && error.response.status === 404) {
            this.$message.error('api未找到')
          }
          if (error.response && error.response.status === 500) {
            this.$message.error('服务器内部错误')
          }
        })
      },
      onSearch () {
        findAllBooks().then(res => {
          // console.log('**************收到返回值***************')
          // console.log(res)
          // console.log('**************收到返回值***************')
          // console.log(res.result)
          this.listData = res.result
        }).catch(error => {
          if (error.response && error.response.status === 403) {
            this.$message.error('api请求方式错误')
          }
          if (error.response && error.response.status === 404) {
            this.$message.error('api未找到')
          }
          if (error.response && error.response.status === 500) {
            this.$message.error('服务器内部错误')
          }
        })
      }
    },
    created () {
      this.user = this.$store.getters.userInfo
    }
  }

</script>
<style scoped>
</style>
